<ul class="nav nav-tabs " role="tablist">
	@foreach($nav as $oneNav)
	<li class="nav-item">
    	<a href="{{ $oneNav['url'] }}" class=" nav-link {{ $oneNav['active'] }}" data-toggle="tab">{{ $oneNav['name'] }}</a>
    </li>
	@endforeach
    <li class="nav-item pull-right header"></li>
</ul>

<div style="display:flex;height:100%;">
	<div id="left-card" class="left" style="width:75%;display:flex;flex-wrap:wrap;align-content:flex-start;">
		
		@foreach($cabinetData['newestData'] as $onePointAlias => $onePointValue)
		@if(strpos($onePointAlias, 'live') === false)
			<div class="single-card" style="box-shadow:1px 2px 6px #888888;width: 22%;margin:0.5rem;height: 16rem;">
				<div>
					<div class="single-title" style="color:#FFFFFF;background:#3DA1E3; font-size: 22px;height:59px;line-height:59px;" onclick="location='{{ url('admin/cabinet-monitor/'.$cabinetData['id'].'-'.$onePointAlias) }}'">
						<span style="margin-left:8px;font-size:24px;">
							{{ isset($points[$onePointAlias]) ? $points[$onePointAlias]['name'] : $onePointAlias }} 
						</span>
					</div>
					<div name="points" class="single-content" style="text-align: center; font-size: 22px;height:172px;flex-direction:column;" onclick="showSetData('{{ isset($points[$onePointAlias]) ? $points[$onePointAlias]['name'] : $onePointAlias }}', '{{ $onePointAlias }}')">
							<div style="width: 100%;color:#3CBE8B;font-size:60px;height:100%;">
								<div style="height:136px;line-height:136px;">
									<span id="{{ $onePointAlias }}">
										{{ (isset($points[$onePointAlias]['decimal']) && $points[$onePointAlias]['decimal']) ? round($onePointValue / pow(10, $points[$onePointAlias]['decimal']), 3) : $onePointValue }}
									</span>
									<span>
										{{ (isset($points[$onePointAlias]['units']) && $points[$onePointAlias]['units']) ? $points[$onePointAlias]['units'] : '' }}
									</span>
								</div>
								<div style="font-size: 18px; color:#666666;height:36px;" id="{{ $onePointAlias }}-time">{{ $cabinetData['time'] }}</div>
							</div>
					</div>
				</div>
			</div>
		@else
			<div id="live-{{ $onePointAlias }}" class="single-card" style="box-shadow:1px 2px 6px #888888;width: 22%;margin:0.5rem;height: 16rem;">
				<div>
					<div class="single-title" style="color:#FFFFFF;background:#3DA1E3; font-size: 22px;height:59px;line-height:59px;">
					</div>
					<div name="points" class="single-content" style="text-align: center; font-size: 22px;height:172px;flex-direction:column;">
							<div style="width: 100%;color:#3CBE8B;font-size:35px;height:100%;">
								<div style="height:136px;line-height:50px;">
									<span id="{{ $onePointAlias }}">
										{{ $onePointValue }}
									</span>
								</div>
								<div style="font-size: 18px; color:#666666;height:36px;" id="{{ $onePointAlias }}-time">{{ $cabinetData['time'] }}</div>
							</div>
					</div>
				</div>
			</div>
		@endif
		@endforeach

	</div>
	<div class="right" style="width:25%;height:100%;">
		<div style="height:20rem;" id="chart1">char1</div>
		<div style="height:20rem;" id="chart2">char2</div>
	</div>
</div>
<script src="/echarts/echarts.common.min.js"></script>
<script type="text/javascript">
	Dcat.ready(function () {
        var chart1 = echarts.init(document.getElementById('chart1'));
        var option1;
        option1 = {
		  title: {
		    text: 'Referer of a Website',
		    subtext: 'Fake Data',
		    left: 'center'
		  },
		  tooltip: {
		    trigger: 'item'
		  },
		  legend: {
		    orient: 'vertical',
		    left: 'left'
		  },
		  series: [
		    {
		      name: 'Access From',
		      type: 'pie',
		      radius: '50%',
		      data: [
		        { value: 1048, name: 'Search Engine' },
		        { value: 735, name: 'Direct' },
		        { value: 580, name: 'Email' },
		        { value: 484, name: 'Union Ads' },
		        { value: 300, name: 'Video Ads' }
		      ],
		      emphasis: {
		        itemStyle: {
		          shadowBlur: 10,
		          shadowOffsetX: 0,
		          shadowColor: 'rgba(0, 0, 0, 0.5)'
		        }
		      }
		    }
		  ]
		};
        option1 && chart1.setOption(option1);


        var chart2 = echarts.init(document.getElementById('chart2'));
        var option2;
        option2 = {
		  yAxis: {
		    type: 'category',
		    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		  },
		  xAxis: {
		    type: 'value'
		  },
		  series: [
		    {
		      data: [120, 200, 150, 80, 70, 110, 130],
		      type: 'bar'
		    }
		  ]
		};
		option2 && chart2.setOption(option2);
    });

    function showSetData(title,alias){
    	var str = "<div><h4>"+title+"<\/h4><p>值：<input type='number' id='alais-val' \/></p><\/div>";
	    layer.confirm(str, {
		  btn: ['确定', '取消']
		}, function(index, layero){
			var alaisVal = $("#alais-val").val();
	        if (!alaisVal || alaisVal == null || alaisVal == undefined) {
	            layer.msg('修改值为能为空', {icon: 2});
	        }

	        let url = "{{ URL::asset('admin/setCabinetDetailData') }}";
	        let data = {
	            _token: '{{ csrf_token() }}',
	            alias: alias,
	            value: alaisVal
	        }
	        $.ajax({
	            type : "POST",
	            url : url,
	            data : data,
	            success : function(result) {
	                console.log(result)
	                if (result.code == 1) {
	                    layer.msg('修改成功', {icon: 1});
	                } else {
	                    layer.msg(result.msg, {icon: 2});
	                }
	            },
	            //请求失败，包含具体的错误信息
	            error : function(e){
	                layer.close(e);
	                console.log(e.status);
	                console.log(e.responseText);
	            }
	        });
		}, function(index){
		  console.log('cancel')
		});
	}
</script>
